<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*, loginmysql.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%!int unidad;
	String icon;%>
<%
	//session = request.getSession(false);
	if (session == null || session.getAttribute("loggedIn") == null) {//logoogle
		//not logged
%><a href="FormLogin.jsp">Inicie Sesion</a>
<%
	} else if ((Integer) session.getAttribute("priv") == 1) {
%><a href="FormLogin.jsp">No tiene los privilegios necesarios</a>
<%
	} else {
		//logged
%>
<head>
<link rel="stylesheet" href="css/metro-bootstrap.css">
<link rel="stylesheet" href="css/modalcss.css">
<link href="css/iconFont.css" rel="stylesheet">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/modal.js"></script>
<script src="js/hist.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
		var queryObject = "";
		var queryObjectLen = "";
		$.ajax({
			type : 'POST',
			url : 'getdata.jsp',
			dataType : 'json',
			success : function(data) {
				queryObject = eval('(' + JSON.stringify(data) + ')');
				queryObjectLen = queryObject.empdetails.length;
			},
			error : function(xhr, type) {
				alert('Error de servidor')
			}
		});
		google.load("visualization", "1", {
			packages : [ "corechart" ]
		});
		google.setOnLoadCallback(drawChart);
		function drawChart() {
			var data = new google.visualization.DataTable();
			data.addColumn('string', 'uid');
			data.addColumn('number', 'Problemas');
			for (var i = 0; i < queryObjectLen; i++) {
				var numProb = queryObject.empdetails[i].numProb;
				var uid = queryObject.empdetails[i].uid;
				data.addRows([ [  uid ,parseInt(numProb) ] ]);
			}
			var options = {
				title : 'Problemas',
			};
			var chart = new google.visualization.ColumnChart(document
					.getElementById('chart_div'));

			chart.draw(data, options);
			// a click handler which grabs some values then redirects the page
	        google.visualization.events.addListener(chart, 'select', function() {
	          // grab a few details before redirecting
	          var selection = chart.getSelection();
	          var row = selection[0].row;
	          var uid = data.getValue(row, 0);
	          location.href = 'Historial.jsp?unidad='+uid;
	        });
		}
	</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panel de Control</title>

<jsp:include page="Nav.html"></jsp:include>

<h1 style="text-align: center">Graficas</h1>

</head>
<body class="metro">
	<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
		url="jdbc:mysql://localhost/cot" user="root" password="Beyer9499" />
	<%
		/*
			 if(request.getParameter("unidad")==null){
			
			 }else{
			 //unidad= request.getParameter("unidad");
			 System.out.println(request.getParameter("unidad"));
			 unidad = Integer.parseInt(request.getParameter("unidad"));
			 }*/
	%>
	<form method=POST action="Stat.jsp" id="formSalida">
		<div id='centered'>
			<span>Grafico: </span> <select name="graph">
				<option value="Problemas"></option>
			</select> <input type=SUBMIT value="Mostrar" />
		</div>
	</form>
		<div id="chart_div"></div>
</body>
</html>
<%
	}
%>